<template>
	<view class="content-card">
		<view class="first">我（总共:{{total}}人）</view>
		<view class="second">
			<view class="item">
				<view class="item-title ss-m-r-30">BD</view>
				<view class="item-num ss-m-r-30">({{bd}}人)</view>
			</view>
			<view class="item">
				<view class="item-title">区县</view>
				<view class="item-num">({{district}}人)</view>
			</view>
			<view class="item">
				<view class="item-title ss-m-l-30">地市</view>
				<view class="item-num ss-m-l-30">({{city}}人)</view>
			</view>

		</view>
		<view class="third">
			<view class="item-2">
				<view class="item-title ss-m-r-40">BDM</view>
				<view class="item-num ss-m-r-40">({{bdm}}人)</view>
			</view>
			<view class="item-2">
				<view class="item-title ss-m-l-60">街道</view>
				<view class="item-num ss-m-l-60">({{street}}人)</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	})
	
	const total = computed(()=>{
		return district.value+city.value+bd.value+bdm.value;
	})
	
	const district = computed(() => {
		if (props.data && props.data['区县服务商']) {
			return props.data['区县服务商'].total;
		} else {
			return 0;
		}
	});

	const city = computed(() => {
		if (props.data && props.data['城市服务商']) {
			return props.data['城市服务商'].total;
		} else {
			return 0;
		}
	});


	const bd = computed(() => {
		if (props.data && props.data['DB']) {
			return props.data['DB'].total;
		} else {
			return 0;
		}
	});

	const bdm = computed(() => {
		if (props.data && props.data['BDM']) {
			return props.data['BDM'].total;
		} else {
			return 0;
		}
	});

	const street = computed(() => {
		if (props.data && props.data['街道服务商']) {
			return props.data['街道服务商'].total;
		} else {
			return 0;
		}
	});

	onMounted(() => {
		console.log('districtAmount:', props.data)
	})
</script>

<style lang="scss" scoped>
	.content-card {
		height: 361rpx;
		width: calc(100% - 21rpx);
		margin-left: 11rpx;
		margin-right: 10;
		border-radius: 20rpx;
		// background: #F4F4F4;
		display: flex;
		flex-direction: column;
		position: relative;
		background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/img/tree.png');
		background-repeat: none;
		background-position: 0rpx 0rpx;
		background-size: 100% 100%;

		.first {
			margin-top: 23rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;


			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 43rpx;
			;
			text-align: center;
			letter-spacing: normal;
			color: #000000;
		}

		.second {
			width: calc(100% - 10rpx);
			margin-left: 5.5rpx;
			margin-right: 5.5rpx;

			margin-top: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item {
				width: 200rpx;
				height: 86rpx;


				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 43rpx;
				text-align: center;
				letter-spacing: normal;
				color: #000000;

				.item-title {
					display: flex;

					justify-content: center;
					align-items: center;
				}

				.item-num {
					display: flex;

					justify-content: center;
					align-items: center;
				}
			}
		}

		.third {
			width: calc(100% - 147.5rpx - 147.5rpx);
			margin-left: 147.5rpx;
			margin-right: 147.5rpx;

			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.item-2 {

				width: 280rpx;

				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #000000;

				.item-num {
					display: flex;

					justify-content: center;
					align-items: center;
				}



			}

		}
	}
</style>